<template>
    <div class="flex-main">
        <div class="flex-body">
            <!-- 选择列表 -->
            <div class="m-class">
                <!-- 左边菜单 -->
                <ul class="m-classleft">
                    <li v-for="(leftitem,index) in leftList" :key="index"
                    :class="{'active':leftIdx==index}"
                    @click="selectMenu(index)">
                      {{leftitem.type}}
                      <i v-show="count[index]>0">{{count[index]}}</i>
                      <!-- <input type="text" name="" v-model="count[index]"> -->
                    </li>
                </ul>
                <!-- 右边产品项目 -->
                <div class="m-classRight">
                    <p class="m-rightTit">{{projectname}}</p>
                    <div>
                        <class-item v-for="(item,index) in proList" :key="index"
                        :projectdata="item"
                        :leftIdx="leftIdx"
                        :rightIdx="index"
                        :chooseList="chooseList"
                        :count="count"
                         @childEvent="parentEvent">
                       </class-item>
                    </div>
                </div>
            </div>
            <!-- 预约确认页 -->

            <div class="m-page-sure" v-if="dialog>0">
                <div id="dialog-face" v-bind:class="{'dialog-face slipBottom': slip==1, 'dialog-face slipUp': slip==2}"></div>
                <div id="dialog" v-bind:class="{'dialog-root slipBottom': slip==1, 'dialog-root slipUp': slip==2}">
                    <div id="dialog-wrapper" v-bind:class="{'dialog-wrapper slipBottom': slip==1, 'dialog-wrapper slipUp': slip==2}">

                        <div class="dialog-header">
                            <span>预约信息</span>
                        </div>
                        <div class="dialog-content">
                              <div class="m-item">
                                  <div class="item-hd">门店:</div>
                                  <div class="item-bd">
                                      <div class="bd-left">{{paramData.shopname}}</div>
                                  </div>
                              </div>
                              <div class="m-item">
                                  <div class="item-hd">接待人员:</div>
                                  <div class="item-bd">
                                      <div class="bd-left">{{paramData.Technicianname}}</div>
                                  </div>
                              </div>
                              <div class="m-item">
                                  <div class="item-hd">项目:</div>
                                  <div class="item-bd">
                                      <div class="bd-left" v-for="(item,index) in chooseList" :key="index" v-if="item.projectname">{{item.projectname}}，</div>
                                  </div>
                              </div>
                              <div class="m-item">
                                  <div class="item-hd">时间:</div>
                                  <div class="item-bd">
                                      <div class="bd-left">{{paramData.birthday}} {{paramData.starttime}}~{{paramData.endtime}}</div>
                                  </div>
                              </div>
                              <div class="m-botton" @click="submit()">确定</div>
                        </div>
                        <div class="dialog-footer iconfont" @click="showDialog(false)">&#xe62b;</div>
                    </div>
                </div>
            </div>

        </div>
        <button class="m-next" @click="showDialog(true)">确认预约</button>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
import {appointProject,submitappointment} from '@/api/appointment.js';//- 封装接口
import { DatetimePicker,Toast,Popup,Picker,Indicator  } from 'mint-ui';//- mint-ui插件
import Vue from 'vue';
export default {
    name:'',
    data () {
        return {
            dialog: 0,//- 第一次隐藏提交页面
            slip: 1,//- 提交页面展示1隐藏，2显示
            leftList: [],//- 左边菜单栏数据
            rightList: [],//- 右边菜单栏数据
            customerid: this.$utils.uid,//- 用户数据id
            count:[], //- 存放右边已经选择的数量左边显示
            proList:[],//- 右边数据展示
            leftIdx:0,//- 左边点击顺序
            projectname: '',//- 右边显示名称
            chooseList: [],//- 保存的选择的项数据
            paramData: {},//- 提交数据
        }
    },
    computed: {
      ...mapState({
        param:state=>state.appointmentStore.param,

      })
    },
//     watch: {
//       count: {
//         handler(newValue, oldValue) {
//           // ...
//           console.log("dasdasdasdasdasd1")
//           for (let i = 0; i < newValue.length; i++) {
// 　　　　　　　　if (oldValue[i] != newValue[i]) {
// 　　　　　　　　　　console.log(newValue)
// 　　　　　　　　}
// 　　　　　　}
//         },
//         deep: true
//       }
//     },
    components: {
        classItem:()=>import('@/model/classPage/classPage_checkbox'),
    },
    methods: {

        //- 父子级绑定传参函数
        parentEvent(data) {
          let that = this;
          let count = data.count;
          let leftIdx = data.leftIdx;
          let projectdata = data.projectdata;
          that.count = count;
          that.chooseList.push(projectdata);
          Vue.set(that.count, leftIdx, count[leftIdx])
        //   console.log(that.chooseList);
        },
        //- 左边选择菜单
        selectMenu(index) {
          let that = this;
          that.leftIdx = index;
          that.rightproject(index);
        },

        //- 弹窗函数
        showDialog(show) {
          let that = this;
          let data = that.chooseList;
          if(data.length<=0){
            Toast({
              message: '请选择项目!',
              position: 'bottom',
              duration: 1500
            });
            return;
          }
          let animation = function() {
              that.dialog = 1;
              that.slip = show?2:1;

          };
          console.log(this.paramData);
          setTimeout(animation, 100);
        },
        //- 预约数据提交
        submit() {
          let that = this;
          let param = that.paramData;
          Indicator.open('加载中...');
          submitappointment({data:param}).then(res=>{
            Indicator.close();
            that.showDialog(false);
            Toast({
              message: '成功添加一条预约登记!',
              position: 'bottom',
              duration: 1500
            });
            that.$router.push({path: '/mine/myAppointment'});
          });

        },
        //- 右边项目数据处理渲染
        rightproject(opt) {
          let that = this;
          let projectdata = that.leftList;
          let projectname = projectdata[opt].type;
          let data = projectdata[opt].project;

          // console.log(data);
          that.proList = data;
          that.projectname = projectname;
        },
        //- 菜单栏所有数据加载
        ListLoad() {
          let that = this;
          appointProject().then(res=>{
            Indicator.close();
            let listdata = res.list;
            let count = that.count;
            for(let i=0;i<listdata.length;i++){
              count.push(0);
            }
            // console.log(count)
            that.leftList = listdata;
            that.count = count;
            that.rightproject(0);

          });
        },

    },
    mounted() {
      Indicator.open('加载中...');
    //   console.log(this.param);
      let that = this;
      that.paramData = this.param.length>0 ? this.param : JSON.parse(sessionStorage.getItem("appointmentdata"));
      that.ListLoad();

      console.log(that.paramData);
    }
}
</script>
<style lang="less" scoped src="@/less/appointment/appointment_project.less"></style>
